<script setup lang="ts">
import { onMounted, computed, reactive } from 'vue';
import { SYS_REGION_QUERY } from '/@/api/modules/base/sys-region';
import { Right as AppNutIconRight, Left as AppNutIconLeft } from '@nutui/icons-vue-taro';
interface Emits {
  /**
   * 选中的区域
   */
  (e: 'onSelected', areaId: string): void;
}

const emits = defineEmits<Emits>();

const state = reactive<{
  /**
   * 原始数据-组织结构list
   */
  sourceList: AppSysRegion.Dto[];
  /**
   * 选中的组织结构list
   */
  selectList: AppSysRegion.Dto[];
  /**
   * 单选的值
   */
  radioVal?: string;
}>({
  sourceList: [],
  selectList: [],
  radioVal: '',
});

/**
 * 查询区域
 * @param page 第几页
 * @param pageSize 每页大小
 */
function queryRegionList(page: number = 1, pageSize: number = 1000) {
  SYS_REGION_QUERY({
    comQuery: { page, pageSize },
  }).then((res) => {
    state.sourceList = res.content;
  });
}

onMounted(() => {
  queryRegionList();
});

/**
 * 点击进入下一层
 * @param item 当前的item
 */
function next(item: AppSysRegion.Dto) {
  state.radioVal = '';
  emits('onSelected', state.radioVal);
  if (item.children && item.children.length > 0) {
    state.selectList.push(item);
  }
}

/**
 * 点击返回按钮
 */
function back() {
  state.selectList.pop();
}

/**
 * 最终显示的list
 */
const displayList = computed(() => {
  if (state.selectList.length === 0) {
    return state.sourceList;
  } else {
    const lastedIndex = state.selectList.length - 1;
    //最后一个
    return state.selectList[lastedIndex].children;
  }
});
/**
 * 点击radio触发事件
 */
function handleChange() {
  state.radioVal && emits('onSelected', state.radioVal);
}
</script>
<template>
  <view class="app-region-list-selector__back" @click="back" v-if="state.selectList.length > 0">
    <app-nut-icon-left /><text>返回上一层</text>
  </view>
  <scroll-view
    class="app-popup__wrapper"
    style="height: 30vh"
    :scroll-y="true"
    :lower-threshold="100"
  >
    <view class="app-region-list-selector__wrapper">
      <nut-radio-group
        class="app-region-list-selector__group"
        v-model="state.radioVal"
        @change="handleChange"
      >
        <nut-radio :label="item.id" v-for="item in displayList" :key="item.id">
          <view class="app-region-list-selector__content">
            <text class="app-region-list-selector__content--left">{{ item.name }}</text>
            <app-nut-icon-right
              class="app-region-list-selector__content--right"
              size="16"
              @click.stop="next(item)"
              v-if="item.children && item.children.length > 0"
            />
          </view>
        </nut-radio>
      </nut-radio-group>
    </view>
  </scroll-view>
</template>
<style lang="scss">
.app-region-list-selector {
  //back按钮
  &__back {
    display: flex;
    align-items: center;
    font-size: 28px;
  }

  &__wrapper {
    padding: 40px 0;
    background-color: #fff;
  }

  &__group {
    display: block;
  }

  &__content {
    display: flex;
    &--left {
      flex: 1;
    }
    &--right {
      padding-left: 80px;
    }
  }
  .nut-radio {
    margin-top: 20px;
  }
}
</style>
